<template>
  <div>
    <el-card shadow="never" :style="{height: documentHeight + 'px', overflow:'auto' }">
      <!--     <div style="float: left">-->
      <el-form :inline="true">
        <el-form-item label="数据来源" label-width="70px" prop="datasourceName">
          <el-select filterable style="width: 90%" size="mini" @change="findTableNames('src')"
                     v-model="queryform.srcDatasourceId"
                     clearable>
            <el-option
              v-for="item in option1"
              :key="item.id"
              :label="item.datasourceName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据去向" label-width="70px" prop="datasourceName">
          <el-select filterable style="width: 90%" @change="findTableNames('target')" size="mini"
                     v-model="queryform.targetDatasourceId"
                     clearable>
            <el-option
              v-for="item in option1"
              :key="item.id"
              :label="item.datasourceName"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据来源表" label-width="80px" prop="datasourceName">
          <el-input placeholder="请输入名称" size="mini" v-model="queryform.srcTableName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数据去向表" label-width="80px" prop="datasourceName">
          <el-input placeholder="请输入名称" size="mini" v-model="queryform.targetTableName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="queryDataSource()">查询</el-button>
          <el-button size="mini" type="primary" @click="addDataSourcedialog()">新增</el-button>
        </el-form-item>
      </el-form>
      <!--       </div>-->
      <div style="width: 100%;margin-top: -40px">
        <table-change @change="tableSize = $event" style="float: right;" />
        <el-table
          :height="documentHeight-181"
          :size="tableSize"
          :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
          :data="tableData"
          row-key="id"
          style="width: 100%;">
          <el-table-column
            align="center"
            prop="name"
            label="名称"
            show-overflow-tooltip
            min-width="200">
          </el-table-column>
          <el-table-column
            align="center"
            prop="srcDatasourceName"
            label="数据来源"
            show-overflow-tooltip
            min-width="150">
          </el-table-column>
          <el-table-column
            align="center"
            prop="targetDatasourceName"
            show-overflow-tooltip
            label="数据去向"
            min-width="120">
          </el-table-column>
          <el-table-column
            align="center"
            prop="srcTableName"
            show-overflow-tooltip
            label="数据来源表"
            min-width="130">
          </el-table-column>
          <el-table-column
            align="center"
            prop="targetTableName"
            label="数据去向表"
            show-overflow-tooltip
            min-width="110">
          </el-table-column>
          <el-table-column
            align="center"
            prop="toolType"
            label="同步工具"
            min-width="100">
          </el-table-column>
          <el-table-column
            align="center"
            prop="fetchSize"
            label="读出行数"
            min-width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="batchSize"
            label="写入行数"
            min-width="80">
          </el-table-column>
          <el-table-column
            align="center"
            prop="batchByteSize"
            label="写入字节数"
            min-width="100">
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            min-width="125">
          </el-table-column>
          <el-table-column
            prop="workType"
            align="center"
            label="同步类型"
            min-width="100">
            <template v-slot="{row}">
              <span v-if="row.workType==='1'">离线同步</span>
              <span v-else>{{ row.workType }}</span>
            </template>
          </el-table-column>
          <!--          <el-table-column-->
          <!--            prop="startTime"-->
          <!--            label="离线同步"-->
          <!--            header-align="center"-->
          <!--            align="center"-->
          <!--            min-width="150">-->
          <!--          </el-table-column>-->
          <el-table-column
            prop="address"
            header-align="center"
            align="center"
            label="操作"
            fixed="right"
            min-width="180">
            <template slot-scope="scope">
              <el-link :click-change-color="true" :underline="false" style="margin-left: 5px"
                       @click="editDataSource(scope.row)" type="primary">编辑
              </el-link>
              <span style="margin-left: 5px;color:#CCCCCC">|</span>
              <el-link :underline="false" style="margin-left: 5px" @click="deleteDataSource(scope.row)" type="primary">
                删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top: 5px;float: right"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size=pagesize
          :page-sizes="[10, 20, 30, 50]"
          layout="total,prev, sizes,pager, next,jumper"
          :total=total>
        </el-pagination>
      </div>

    </el-card>
    <el-dialog
      :title="dialogtitle"
      :visible.sync="nodedialogVisible"
      width="70%"
      :before-close="nodehandleClose"
      top="10px"
      :close-on-click-modal=false
      class="nodeDialog"
      :onselectstart="false"
    >
      <el-form style="margin-left: 40px" :inline="true" :model="nodename">
        <el-form-item label="名称" label-width="80px">
          <el-input style="width: 530px" size="mini" v-model="nodename.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="同步工具" label-width="80px">
          <el-select filterable style="width: 520px" size="mini"
                     v-model="toolType" @change="getOffline()" placeholder="请选择同步工具">
            <el-option
              v-for="item in toolTypeOption"
              :key="item.lable"
              :label="item.lable"
              :value="item.lable">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <datax-json v-if="toolType==='datax-shell'" ref="dataxjson"></datax-json>
      <nodeContainers v-else ref="nodeContainers"></nodeContainers>
      <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="nodehandleClose()">取 消</el-button>
           <el-button type="primary" size="mini" @click="saveNode()">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
// import defaultValue from "./components/dialogdata";
import Print from "@/util/print";
import axios from "axios";
import nodeContainers from "@/views/dataCollect/compents/nodeContainers.vue";
import dataxJson from "@/views/datadevelop/components/dataxJson.vue";
// import datatree from './components/dataDevelopTree.vue'
// import treehead from './components/treehead.vue'
// import containers from './components/graphContainers.vue'
// import nodeContainers from './components/nodeContainers.vue'
export default {
  name: "demo1",
  components: { dataxJson, nodeContainers },
  data() {
    return {
      value: true,
      option1: [],
      option2: [],
      nodename: {
        name: "",
        nodeId: ""
      },
      queryform: {
        srcDatasourceId: "",
        targetDatasourceId: "",
        srcTableName: "",
        targetTableName: ""
      },
      tableSize: "",
      tableData: [],
      dialogtitle: "新增数据集成",
      nodedialogVisible: false,
      addsourceoptions: [],
      addsourceChildoptions: [],
      parentJobIdoptions: [],
      addsourceform: {
        parentJobId: "",
        jobName: "",
        jobCron: "",
        jobDesc: "",
        flowInfoId: "",
        triggerType: "1",
        threads: ""
        // executorTimeout: "",
        // executorFailRetryCount: "",
      },
      jobId: "",
      toolType: "datax-skin",
      toolTypeOption: [
        { lable: "datax-skin" },
        { lable: "datax-fast" },
        { lable: "datax-shell" }
      ],

      fromrules: {
        // jobCron: { required: true, message: "请输入", trigger: "blur" },
        flowInfoId: { required: true, message: "请选择", trigger: "change" },
        jobDesc: { required: true, message: "请输入", trigger: "blur" },
        // executorTimeout: { required: true, message: "请输入", trigger: "blur" },
        // executorFailRetryCount: { required: true, message: "请输入", trigger: "blur" },
        subJobId: { required: true, message: "请选择", trigger: "blur" }
      },
      mysqlshow: false,
      hbaseinputshow: false,
      mongodbinputshow: true,
      currentPage: 1,
      pagesize: 30,
      initialaddsourceform: {},
      total: 0,
      catchToolType: ""
    };
  },
  methods: {
    addDataSourcedialog() {
      this.catchToolType = "";
      this.dialogtitle = "新增数据集成";
      this.nodedialogVisible = true;
      this.nodename.name = "";
      this.catchToolType = this.toolType = "datax-skin";
      this.$refs.nodeContainers&&this.$refs.nodeContainers.restForm();
      this.$refs.dataxjson && this.$refs.dataxjson.restForm();
    },
    getMappingValue() {
      this.$bus.$emit("getMappingValue");
      this.mappingValueList = this.$refs.nodeContainers.$refs.fieldMapping.mappingValueList;
    },
    saveNode() {
      if (this.toolType === "datax-shell") {
        let querydata = this.$refs.dataxjson.addform;
        querydata.toolType = this.toolType;
        querydata.componentSeq = this.nodename.nodeId;
        querydata.flowInfoId = this.flowId;
        querydata.name = this.nodename.name;
        if (this.dialogtitle === "编辑数据集成") {
          querydata.id = this.editId;
        }
        this.$http.post("/dataWork/saveDataWork", querydata).then((res) => {
          // if (res.code === 200) {
          if (this.dialogtitle === "编辑数据集成") {
            this.$message.success("编辑成功");
          } else {
            this.$message.success("保存成功");
          }

          this.nodedialogVisible = false;
          this.$refs.dataxjson.restForm();
          // }
        }).finally(() => {
          this.catchToolType = this.toolType;
          this.queryDataSource();
        });
      }
      else {
        this.getMappingValue();
        let querydata = {
          "srcDatasourceId": this.$refs.nodeContainers.dataSourceForm.dataSource,
          "targetDatasourceId": this.$refs.nodeContainers.dataSourceTo.dataSource,
          "srcTableName": this.$refs.nodeContainers.dataSourceForm.dataSourceTable,
          "targetTableName": this.$refs.nodeContainers.dataSourceTo.dataSourceTable,
          "targetPreSql": this.$refs.nodeContainers.dataSourceTo.targetPreSql,
          "targetPostSql": this.$refs.nodeContainers.dataSourceTo.targetPostSql,
          "srcWhereParam": this.$refs.nodeContainers.dataSourceForm.srcWhereParam,
          "threads": this.$refs.nodeContainers.passControl.threads,
          "maxErrorCount": this.$refs.nodeContainers.passControl.maxErrorCount,
          "maxErrorPercent": this.$refs.nodeContainers.passControl.maxErrorPercent,
          "columnList": this.mappingValueList,
          "src_id_expression": this.$refs.nodeContainers.dataSourceForm.src_id_expression,
          "src_start_id": this.$refs.nodeContainers.dataSourceForm.src_start_id,
          "srcIdExpression": this.$refs.nodeContainers.dataSourceForm.srcIdExpression,
          "srcIdOffset": this.$refs.nodeContainers.dataSourceForm.srcIdOffset,
          "srcStartId": this.$refs.nodeContainers.dataSourceForm.srcStartId,
          "srcSchema": this.$refs.nodeContainers.dataSourceForm.schema,
          "targetSchema": this.$refs.nodeContainers.dataSourceTo.schema,
          "srcSqlText": this.$refs.nodeContainers.dataSourceForm.srcSqlText,
          "name": this.nodename.name,
          "toolType": this.toolType,
          "fetchSize": this.$refs.nodeContainers.passControl.fetchSize,
          "batchSize": this.$refs.nodeContainers.passControl.batchSize,
          "batchByteSize": this.$refs.nodeContainers.passControl.batchByteSize
        };
        if (this.dialogtitle === "编辑数据集成") {
          querydata.id = this.editId;
        }
        this.$http.post("/dataWork/saveDataWork", querydata).then((res) => {
          // console.log(res);
          if (this.dialogtitle === "编辑数据集成") {
            this.$message.success("编辑成功");
          } else {
            this.$message.success("保存成功");
          }
          this.nodedialogVisible = false;
        }).finally(() => {
          this.queryDataSource();
          this.catchToolType = ""
        }).catch(() => {
        });

      }

    },
    queryDataSource() {
      this.$http.post("/dataWork/findDataWorkPage", {
          pageNum: this.currentPage,
          pageSize: this.pagesize,
          param: {
            srcDatasourceId: this.queryform.srcDatasourceId, targetDatasourceId: this.queryform.targetDatasourceId,
            srcTableName: this.queryform.srcTableName, targetTableName: this.queryform.targetTableName
          }
        }
      ).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      }).finally(() => {
      });

    },
    editDataSource(row) {
      // console.log(this.catchToolType,this.toolType);
      if (this.catchToolType === "" || this.catchToolType === this.toolType) {
        this.catchToolType = "";
        this.editId = row.id;
        this.dialogtitle = "编辑数据集成";
        this.nodedialogVisible = true;
        let querydata = {
          id: row.id
        };
        this.$http.post("/dataWork/getDataWork", querydata).then((res) => {
          // console.log(res);
          // if (res.data) {
          this.nodename.name = res.data.name;
          res.data ? (this.toolType = res.data.toolType, this.catchToolType = res.data.toolType) : this.toolType = this.catchToolType = "datax-skin", this.$refs.nodeContainers && this.$refs.nodeContainers.restForm();
          // }
          this.$nextTick(()=>{
            if(this.toolType==="datax-shell"){
              this.$refs.dataxjson.invertData(res.data);
            }else {
              this.$refs.nodeContainers.invertData(res.data);
            }
          })
        });
      }

    },
    getOffline() {
      if (this.catchToolType === "" || this.catchToolType === this.toolType) {
        let querydata = {
          id: this.editId
        };
        this.$http.post("/dataWork/getDataWork", querydata).then((res) => {
          // console.log(res);
          // if (res.data) {
          this.nodename.name = res.data.name;
          res.data ? (this.toolType = res.data.toolType, this.catchToolType = res.data.toolType) : this.toolType = this.catchToolType = "datax-skin", this.$refs.nodeContainers && this.$refs.nodeContainers.restForm();
          this.$nextTick(()=>{
            if(this.toolType==="datax-shell"){
              this.$refs.dataxjson.invertData(res.data);
            }else {
              this.$refs.nodeContainers.invertData(res.data);
            }
          })
          // }
        });
      }
    },
    deleteDataSource(row) {
      this.$confirm("是否删除此条数据集成", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.post("/dataWork/deleteDataWork", { id: row.id }).then((res) => {
          if (res.code === "200") {
            this.$message({
              // showClose:true,
              type: "success",
              message: "删除成功!"
            });
          }
        }).finally(() => {
          this.queryDataSource();
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    },
    nodehandleClose() {
      this.$refs.dataxjson && this.$refs.dataxjson.restForm();
      this.$refs.nodeContainers && this.$refs.nodeContainers.restForm();
      this.nodedialogVisible = false;
      this.catchToolType = ""
    },
    //获取数据源
    findDatasource() {
      this.$http.post("/dataWork/findDatasource").then((res) => {
        this.option1 = res.data;
      });
    },
    //查找表
    findTableNames(data) {
      let query = {
        datasourceId: ""
      };
      if (data === "src") {
        query.datasourceId = this.queryform.srcDatasourceId;
      } else {
        query.datasourceId = this.queryform.targetDatasourceId;
      }
      this.$http.post("/dataWork/findTableNames", query).then((res) => {
        this.option2 = res.data;
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.queryDataSource();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryDataSource();
    }
  },
  computed: {
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 220;
    }
  },
  created() {
    this.findDatasource();
    this.queryDataSource();
    this.initialaddsourceform = Object.assign({}, this.addsourceform);
  }

};
</script>

<style scoped>


::v-deep .el-card__body {
    padding-top: 5px;
}
</style>
